<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标、键盘事件</title>
        <style type = "text/css">
            #box1
            {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script type="text/javascript">
            event = event || window.event;
            
            window.onload = function()
            {
                var box1 = document.getElementById("box1");
                /*
                    onmousewheel鼠标滚轮滚动事件
                        火狐浏览器不支持

                    在火狐浏览器中需要使用onwheel来绑定鼠标滚动事件
                */
                box1.DOMMouseScroll = function(event)
                {
                    // alert("111");
                    /*
                        eventDelta滚轮缩放大小
                            向上 +
                            向下 -
                            火狐浏览器不支持
                        可以使用event.detail来代替
                            向上 -
                            向下 +
                    */
                   alert(event.detail);
                   /*
                    if(event.detail > 0)
                    {
                        //box1变长
                        box1.style.height = box1.clientHeight + 10 + "px";
                    }
                    else
                    {
                        box1.style.height = box1.clientHeight - 10 + "px";
                    }
                    */
                }
            }
        </script>
    </head>

    <body>
        <div id = "box1"></div>
    </body>
</html>